<template>
  <div>
    <div class="goods">
      <category-good v-for="good in goods"
                     :key="good.id"
                     :data="good"/>
    </div>
    <!-- 触底加载更多、完成加载后显示没有更多 -->
    <loading-more :load-more="loadMore"/>
  </div>
</template>

<script lang="ts"
        setup>
import CategoryGood from '@/components/library/CategoryGood.vue'
import LoadingMore from '@/components/library/LoadingMore.vue'
import type {Good} from '@/types/good'
import {toRefs} from 'vue'

let props = defineProps<{
  data: Good[],
  loadMore: Function
}>()
let {data: goods} = toRefs(props)
</script>

<style lang="less"
       scoped>
.goods {
  display: flex;
  flex-wrap: wrap;

  > * {
    margin-bottom: 20px;
  }

  > :not(*:nth-of-type(5n)) {
    margin: 0 20px 20px 0;
  }
}
</style>